<template>
	<header id="searchBar" :class="{'isFixed':searchBarFixed}">
		<span class="iconfont" @click="$router.go(-1)">&#xe637;</span>
		<h2>{{title}}</h2>
	</header>
</template>
<script type="text/javascript">
export default {
	name:"commonHeader",
	props:{
		title:{
			type:String,
			default:""
		}
	},
	data(){
		return {
			searchBarFixed:false
		}
	},
	methods:{
		handleScroll(){
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  			var offsetTop = document.querySelector('#searchBar').offsetTop
			 if (scrollTop > offsetTop) {
			    this.searchBarFixed = true
			} else {
			    this.searchBarFixed = false
			}
		}
	},
	mounted(){
		window.addEventListener('scroll', this.handleScroll)
	},
	destroyed(){
	    window.removeEventListener('scroll', this.handleScroll)
	}

}
</script>
<style type="text/css" scoped>
header{
	padding:8px 0;
	position:relative;
	z-index:10;
	text-align:center;
	margin-bottom:8px;
}
header.isFixed{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	background: #FFF;
}
header span{
	position: absolute;
	left: 8px;
}
</style>